<template>
  <div>
    <Modal width="800px" v-model:visible="visible" title="查看文件内容">
      <Tabs v-model:activeKey="activeKey">
        <TabPane key="1" tab="升级文件">
          <div class="md:mx-4">
            <Textarea v-model:value="sqlContent" :rows="10" />
          </div>
        </TabPane>
        <TabPane :disabled="!props.record?.fileRollback" key="2" tab="回滚文件">
          <div class="md:mx-4">
            <Textarea v-model:value="sqlContent" :rows="10" />
          </div>
        </TabPane>
      </Tabs>
      <template #footer>
        <Button @click="handleClose">关闭</Button>
      </template>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import { defineProps, reactive, ref, toRaw, watch } from 'vue';
import { Modal, Textarea, Tabs, TabPane, Button } from 'ant-design-vue';
import { downloadUpgradeRecord } from '/@/api/upgrade-center/datastore/upgradeDb';

interface Values {
  id: string;
  type: number;
}
let props = defineProps({
  detailVisible: Boolean,
  record: Object,
});
const emit = defineEmits(['cancelDetail', 'success']);
const formState = reactive<Values>({
  id: props.record?.id,
  type: 1,
});

const visible = ref();

const sqlContent = ref('');

const activeKey = ref('1');

const handleClose = () => {
  formState.type = 1;
  emit('cancelDetail');
};

watch(
  () => [props.detailVisible, props.record?.id, activeKey],
  async (newVal) => {
    let visibleVal = newVal[0];
    let recordIdVal = newVal[1];
    visible.value = visibleVal;
    let isRecordIdUndefined = recordIdVal === '' || recordIdVal === null || recordIdVal === undefined;
    if (newVal[0] && !isRecordIdUndefined) {
      formState.id = recordIdVal;
      formState.type = newVal[2].value;
      const res = await downloadUpgradeRecord(toRaw(formState));
      sqlContent.value = res;
    }
  },
  { immediate: true, deep: true }
);
</script>
